<template>
  <div v-if="!routeCode" class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'

export default {
  name: 'Dashboard',
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      currentRole: 'adminDashboard'
    }
  },
  mounted() {
    // 判断url是否存在code，如果存在则调整到对应页面,否则调到第一个菜单中
    if (sessionStorage.getItem('dashboardLoaded')) {
      return
    }
    if (this.routeCode) {
      const route = this.getRoute(this.routeCode)
      const routeQuery = {}
      // 拼接非pageId值
      Object.keys(this.$route.query).forEach(key => {
        if (!['pageId'].includes(key)) {
          routeQuery[key] = this.$route.query[key]
        }
      })
      // 菜单存在直接直接跳转
      if (route) {
        sessionStorage.setItem('dashboardLoaded', '1')
        this.$router.replace({
          path: route.path,
          query: routeQuery
        })
      }else{
        this.$store.dispatch('permission/creteDynamicRoute', {
          pageId: this.routeCode
        }).then((dynamicRoute) => {
          sessionStorage.setItem('dashboardLoaded', '1')
          this.$router.replace({
            path: dynamicRoute.path,
            query: routeQuery
          })
        }).catch(err=>{
          this.$$message(err)
          return
        })
      }
    } else {
      const route = this.getFirstMenu()
      sessionStorage.setItem('dashboardLoaded', '1')
      if (route) {
        this.$router.push({
          path: route.path
        })
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    ...mapState({
      routes: state => state.permission.routes,
      addRoutes: state => state.permission.addRoutes
    }),
    routeCode: function() {
      return this.$route.query.pageId || ''
    }
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
  },
  methods: {
    getRoute(code) {
      let route = null
      this.routes.forEach(i => {
        if (i.meta && i.meta.code == code) {
          route = i
        } else if (i.children && i.children.length) {
          i.children.forEach(ii => {
            if (ii.meta && ii.meta.code == code) {
              route = ii
            } else if (ii.children && ii.children.length) {
              ii.children.forEach(iii => {
                if (iii.meta && iii.meta.code == code) {
                  route = iii
                }
              })
            }
          })
        }
      })
      return route
    },
    // 获取第一个菜单
    getFirstMenu() {
      let route = null
      this.addRoutes.forEach((firstRoute, index) => {
        if (index === 0) {
          if (firstRoute.children && firstRoute.children.length) {
            firstRoute.children.filter(i=>!i.hidden).forEach((subRoute, i) => {
              if (i === 0) {
                if (subRoute.children && subRoute.children.length) {
                  subRoute.children.filter(i=>!i.hidden).forEach((thirdRoute, ii) => {
                    if (ii === 0) {
                      if (thirdRoute.children && thirdRoute.children.length) {
                        thirdRoute.children.filter(i=>!i.hidden).forEach((forthRoute, iii) => {
                          if (iii === 0) {
                            if (forthRoute.children && forthRoute.children.length) {
                              route = forthRoute = forthRoute.children.filter(i=>!i.hidden)[0]
                            } else {
                              route = forthRoute
                            }
                          }
                        })
                      } else {
                        route = thirdRoute
                      }
                    }
                  })
                } else {
                  route = subRoute
                }
              }
            })
          } else {
            route = firstRoute
          }
        }
      })
      return route
    }
  }
}
</script>
